HTML5 ブラウザサポート

HTML5 ブラウザサポート

現代のブラウザはすべてHTML5をサポートしています。しかし、HTML5をサポートしていない古いブラウザでもHTML5を使えるようにする方法があります。

古いブラウザでのHTML5サポート

全てのブラウザ（古いものと最新のものを含む）は、認識できない要素を自動的にインライン要素として処理します。このため、ブラウザに「未知の」HTML要素を処理させることができます。

注意：IE6（Windows XP 2001）ブラウザにも未知のHTML要素を処理させることができます。

HTML5要素をブロック要素として定義する

HTML5には8つの新しいHTMLセマンティック要素があります。これらすべての要素はブロックレベル要素です。

古いバージョンのブラウザでこれらの要素を正しく表示させるためには、CSSのdisplay属性をblockに設定します：

例

header, section, footer, aside, nav, main, article, figure {
    display: block;
}​

HTMLに新しい要素を追加する

HTMLに新しい要素を追加することもできます。

以下の例では、HTMLに新しい要素を追加し、その要素にスタイルを定義しています。要素名は <myHero> です：

JavaScriptのdocument.createElement("myHero")は、IEブラウザに新しい要素を追加するためのものです。

Internet Explorerブラウザの問題

上記の方法を使用してIEブラウザにHTML5要素を追加することができますが、以下の問題があります：

注意：Internet Explorer 8およびそれ以前のバージョンのブラウザでは、上記の方法はサポートされていません。

HTML5 Enabling JavaScript（html5shiv）

Sjoerd Visscherが作成した"HTML5 Enabling JavaScript"（html5shiv）を使用して、この問題を解決できます：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->​

上記のコードはコメントです。これは、IEブラウザのバージョンがIE9よりも小さい場合に、html5.jsファイルを読み込み、それを解析します。

注意：国内ユーザーは以下の静的リソースライブラリを使用してください（Googleリソースライブラリは国内で不安定です）：

<!--[if lt IE 9]>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->​

完璧なShivソリューション

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5のレンダリング</title>
  <!--[if lt IE 9]>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js"></script>
  <![endif]-->
</head>
<body>
<h1>私の最初の記事</h1>
<article>
ITチュートリアル —— 基本的なIT技術を学びましょう！！！
</article>
</body>
</html>

html5shiv.jsの参照コードは、HTML5の新しい要素を解析するために、IEブラウザがこのファイルを先に読み込む必要があるため、<head>要素内に配置する必要があります。

HTML5 ブラウザサポート

Q&A

Q1: HTML5はすべてのブラウザでサポートされていますか？

A1: ほとんどのモダンブラウザ（Chrome、Firefox、Safari、Opera、Edge）はHTML5をサポートしています。ただし、古いバージョンのブラウザ（IE8以前）は追加のサポートが必要です。

Q2: HTML5shivとは何ですか？

A2: HTML5shivは、古いバージョンのInternet ExplorerブラウザでHTML5要素をサポートするためのJavaScriptライブラリです。

Q3: HTML5shivを使用するための基本的な設定は何ですか？

A3: HTML5shivを使用するには、以下のコードを<head>セクションに追加します：

<!--[if lt IE 9]>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->